<template>
    <div>
        <span>演示内容</span>
        <ul>
            <li class="a">
                style标签内手动import: myColor
            </li>
            <li class="b">
                script标签内import<br/>
                注意: 导入的文件名需要为.module.css/scss/less，
                原因不确定。<br/>
                variables from '@/styles/variables2.module.scss' = {{ jsStyle }}
            </li>
            <li class="c">
               全局导入变量<br/>
               global_color 
            </li>
            <li class="d">
                import'./demo2.css'<br/>
               cssColor 
            </li>
        </ul>
    </div>
</template>
<script setup lang='ts'>
import variables from './variables2.module.scss'
import'./demo2.css';
import demo2 from './demo2.css?inline'
// import {cssColor} from './demo2.module.css'
import { ref } from 'vue';
console.log('variables',variables);
console.log(demo2);
// console.log('demo2Css',cssColor);

const jsStyle=ref(variables);

</script>
<style lang='scss' scoped>
 @import "./demo.scss"; //局部导入ok  
 @import './variables2.module.scss';
.a {
    color:$myColor;
}
.b{
    color:$moduleColor;
}
.c{
    color:$globalTest
}
li{
    margin-bottom: 20px;
    border-bottom: solid 2px;
}
.d{
    color:var(cssColor)
}
</style>